<template>
    <div class="layout">
        <div class="title">浏览趋势</div>
        <div class="btn">
            <div class="btn_left" @click="change($event)">
                <div :id="1" :class="['btn_item', currentIndex == 1 ? 'active' : '']">超过1天未跟进</div>
                <div :id="2" :class="['btn_item', currentIndex == 2 ? 'active' : '']">超过2天未跟进</div>
                <div :id="3" :class="['btn_item', currentIndex == 3 ? 'active' : '']">超过3天未跟进</div>
                <div :id="4" :class="['btn_item', currentIndex == 4 ? 'active' : '']">超过4天未跟进</div>
                <div :id="5" :class="['btn_item', currentIndex == 5 ? 'active' : '']">超过5天未跟进</div>
            </div>
            <div class="btn_right" @click="export2Img(myRef, '浏览趋势')">导出</div>
        </div>
        <div v-show="isShoweCharts" ref="myRef" class="line"></div>
        <el-empty v-show="!isShoweCharts" description="暂无数据"></el-empty>
    </div>
</template>

<script setup lang="ts">
import { ref, inject, onMounted, reactive, watch, nextTick } from 'vue';
import { cusLineInfo } from '@/api/customerCenter';
import { getDay } from '@/utils/timeCycle';
import { export2Img } from '@/utils/utils';

const echarts = inject('ec');
const currentIndex = ref('1');
const isShoweCharts = ref(false);
const xData = ref([]);
const yData = ref([]);
const props = defineProps(['searchInfo']);
const params = reactive({
    /*  start_time: getDay(-7),
    end_time: getDay(0, true), */
    start_time: getDay(0),
    end_time: getDay(7),
    source: currentIndex.value,
    departments: ''
});
const myRef = ref();
// 切换浏览的数据
const change = (event: any) => {
    currentIndex.value = event.target.id;
    params.source = event.target.id;
    getLineInfo();
};
// 搜索数据
const getSearchData = (data: any) => {
    params.start_time = data.date1;
    params.end_time = data.date2;
    params.departments = data.member;
    getLineInfo();
};
// 获取折线图数据
const getLineInfo = () => {
    xData.value = [];
    yData.value = [];
    cusLineInfo(params).then((data: any) => {
        if (data.length > 0) {
            isShoweCharts.value = true;
            nextTick(() => {
                data.map((item: any) => {
                    xData.value.push(item.date);
                    yData.value.push(item.num);
                });
            });
        } else {
            isShoweCharts.value = false;
        }
    });
};
defineExpose({ getSearchData });
getLineInfo();
const getEchart = () => {
    const myChart = echarts.init(myRef.value);
    myChart.setOption({
        grid: {
            top: 20,
            bottom: 10,
            left: 32,
            right: 40,
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData.value
        },
        yAxis: {
            type: 'value',
            splitNumber: 10
        },
        series: [
            {
                data: yData.value,
                type: 'line',
                //smooth: true,
                symbol: 'circle',
                symbolSize: 15,
                areaStyle: {
                    normal: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            { offset: 0, color: '#F8DCD1' },
                            { offset: 0.5, color: '#FDF8F6' },
                            { offset: 1, color: '#FFFAF9' }
                        ])
                    }
                },
                itemStyle: {
                    normal: {
                        color: '#FF6B00'
                    }
                }
            }
        ]
    });
    window.onresize = function () {
        myChart.resize();
    };
};
watch(
    () => xData,
    () => {
        getEchart();
    },
    { deep: true }
);
</script>

<style lang="scss" scoped>
.layout {
    height: 480px;
    padding: 35px 30px;
    box-sizing: border-box;
    background-color: #ffff;

    .title {
        width: 100%;
        padding-bottom: 17px;
        border-bottom: 1px solid #eaeaea;
    }

    .btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 21px;

        .btn_left {
            display: flex;
            align-items: center;

            .btn_item {
                padding: 10px 18px;
                background: #fff;
                font-size: 16px;
                line-height: 16px;
                font-weight: 500;
                color: #ff6b00;
                border: 1px solid #ff6b00;
                cursor: pointer;
            }

            .active {
                background: #ff6b00;
                color: #fff;
            }
        }

        .btn_right {
            padding: 11px 18px;
            font-size: 14px;
            font-weight: 300;
            background: #fff;
            border-radius: 4px;
            border: 1px solid #eaeaea;
            cursor: pointer;
        }
    }

    .line {
        width: 100%;
        height: 100%;
    }
}
</style>
